<template>
	<view>
		<!-- <Head
      :goback_custom="true"
      @gobackCustomMethod="$emit('closeSwitchType')"
    ></Head> -->
		<view class="top_head">切换身份</view>
		<view class="box_1" v-if="target_utype === 2 && showLoginContent">
			<view class="box_ava"></view>
			<view class="box_content">
				<view class="tx1">求职者</view>
				<view class="tx2">免费创建简历</view>
				<view class="tx2">职位海量淘</view>
				<view class="tx2">简历轻松投</view>
			</view>
			<view class="box_btn_wrapper">
				<u-button type="primary" shape="circle" @click="showLoginFun"
					:custom-style="{'margin-bottom': '20rpx', 'vertical-align': 'top'}">
					切换到求职者
				</u-button>
				<u-button type="primary" shape="circle" plain @click="$emit('closeSwitchType')">
					返回企业会员中心
				</u-button>
			</view>
		</view>
		<view class="box_1" v-if="target_utype === 1 && showLoginContent">
			<view class="box_ava"></view>
			<view class="box_content">
				<view class="tx1">招聘者</view>
				<view class="tx2">发布招聘信息</view>
				<view class="tx2">寻找优秀人才</view>
				<view class="tx2">获取更多资源</view>
			</view>
			<view class="box_btn_wrapper">
				<u-button type="primary" shape="circle" @click="showLoginFun"
					:custom-style="{'margin-bottom': '20rpx', 'vertical-align': 'top'}">
					切换到企业
				</u-button>
				<u-button type="primary" shape="circle" plain @click="$emit('closeSwitchType')">
					返回求职者会员中心
				</u-button>
			</view>
		</view>
		<!-- <u-popup
      v-model="showLogin"
      mode="right"
      :mask="false"
	  width="100%"
	  z-index="23075"
    >
      <Login
        :utype="target_utype"
        :single_login="true"
        @afterLogin="afterLogin"
        after_login_data=""
        :goback_custom="true"
        @gobackCustomMethod="closeLogin"
      ></Login>
    </u-popup> -->
		<view :class="showLogin ? 'login-popup login-popup-ac' : 'login-popup' ">
			<Login :utype="target_utype" :single_login="true" @afterLogin="afterLogin" after_login_data=""
				:goback_custom="true" @gobackCustomMethod="closeLogin"></Login>
		</view>
	</view>
</template>

<script>
	import Login from '@/components/Login'
	export default {
		name: 'SwitchType',
		props: ['target_utype'],
		components: {
			Login
		},
		data() {
			return {
				showLogin: false,
				showLoginContent: true
			}
		},
		methods: {
			showLoginFun() {
				this.showLogin = true
				this.showLoginContent = false
			},
			closeLogin() {
				this.showLogin = false
				this.showLoginContent = true
			},
			afterLogin(data) {
				this.showLogin = false
				if (this.target_utype == 1) {
					uni.redirectTo({
						url: '/company/CompanyIndex'
					})
				} else {
					uni.redirectTo({
						url: '/personal/PersonalIndex'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-popup {
		position: fixed;
		right: -100vw;
		top: 0;
		z-index: 22222;
		width: 100vw;
		height: 100vh;
		transition: all .3s;
		background: #FFFFFF;

		&.login-popup-ac {
			right: 0;
		}
	}

	.box_btn_wrapper {
		width: 540rpx;
		margin: 0 auto;
	}

	.top_head {
		padding: 36rpx 22rpx;
		text-align: center;
		font-size: 60rpx;
		color: #333333;
		background-image: url($ImgUrl + "switch_member_top_bg.png");
		background-repeat: no-repeat;
		background-position: center 0;
		background-size: 455rpx 83rpx;
	}

	.box_1 {
		width: 701rpx;
		height: 960rpx;
		margin: 0 auto;
		position: relative;
		padding-top: 180rpx;
		background-image: $switch_wrapper_bg;
		background-repeat: no-repeat;
		background-position: 0;
		background-size: 701rpx 960rpx;

		.box_ava {
			position: absolute;
			left: 50%;
			top: 96rpx;
			width: 200rpx;
			height: 200rpx;
			transform: translate(-50%, 0);
			background-image: url($ImgUrl + "switch_member_a1.png");
			background-repeat: no-repeat;
			background-position: 0;
			background-size: 200rpx;
		}

		.box_content {
			width: 520rpx;
			background: #ffffff;
			margin: 0 auto 32rpx;
			text-align: center;
			box-shadow: 0 2rpx 10rpx #c2c2c2;
			border-radius: 20rpx;
			padding: 148rpx 0 36rpx;

			.tx1 {
				font-size: 44rpx;
				color: #333333;
				display: inline-block;
				padding: 0 90rpx;
				position: relative;
				margin-bottom: 20rpx;

				&::before {
					content: " ";
					position: absolute;
					left: 10rpx;
					top: 50%;
					transform: translate(0, -50%);
					width: 70rpx;
					height: 21rpx;
					background-image: url($ImgUrl + "switch_member_title_bg1.png");
					background-repeat: no-repeat;
					background-position: 0;
					background-size: 70rpx 21rpx;
				}

				&::after {
					content: " ";
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translate(0, -50%);
					width: 70rpx;
					height: 21rpx;
					background-image: url($ImgUrl + "switch_member_title_bg2.png");
					background-repeat: no-repeat;
					background-position: 0;
					background-size: 70rpx 21rpx;
				}
			}

			.tx2 {
				font-size: 30rpx;
				color: #999999;

				&:not(:last-child) {
					margin-bottom: 22rpx;
				}
			}
		}
	}
</style>
